import React, { Component } from 'react';
import {
    Text,
    StyleSheet,
    View,
    TouchableOpacity,
    Image,
    Dimensions,
    FlatList,
} from 'react-native';

const { width, height } = Dimensions.get('screen');
const rpx = x => (width / 750) * x;

export default class MainScreen extends Component {
    data = [
        {
            title: '上架商品总数',
            count: '24,380',
            desc: '+128%较上月',
            color: 'green',
        },
        { title: '注册用户总数', count: '1,965', desc: '-50%较上月', color: 'green' },
        {
            title: '上架商品总数',
            count: '24,380',
            desc: '+128%较上月',
            color: 'green',
        },
        {
            title: '当日PC端PV量',
            count: '14,281',
            desc: '-50%较昨日',
            color: 'red',
        },
        { title: '移动端PV量', count: '29,315', desc: '-34%较昨日', color: 'red' },
        { title: 'App总下载量', count: '7,422', desc: '+18%较上周', color: 'green' },
        // 与vue相同,  React也采用了 webpack 工具进行项目打包.
        // webpack工具是 静态(代码未运行时)识别, 识别到JS代码中使用了哪些图片 然后进行打包
        // webpack就可以识别到, require 引入了哪个图片, 进而进行打包操作
        {
            title: '商品管理',
            icon: require('../assets/menu_product.jpg'),
            target: 'Product', //点击后跳转到哪里
        },
        {
            title: '用户管理',
            icon: require('../assets/menu_user.jpg'),
            target: '暂未指定',
        },
        {
            title: '订单管理',
            icon: require('../assets/menu_order.jpg'),
            target: '暂未指定',
        },
        {
            title: '首页管理',
            icon: require('../assets/menu_heart.jpg'),
            target: '暂未指定',
        },
    ];

    componentDidMount() {
        this.props.navigation.setOptions({
            title: '主菜单',
            headerRight: () => (
                <TouchableOpacity style={{ marginRight: rpx(20) }}>
                    <Image
                        style={{ width: rpx(60), height: rpx(60), borderRadius: rpx(30) }}
                        source={require('../assets/user.png')}
                    />
                </TouchableOpacity>
            ),
        });
    }

    render() {
        return (
            <FlatList
                numColumns={2}
                data={this.data}
                keyExtractor={(item, index) => index + ''}
                renderItem={this._renderItem}
                style={{ backgroundColor: 'white' }}
            />
        );
    }

    // renderItem: 为不同的数据项 提供对应的UI
    _renderItem = ({ index, item }) => {
        // 从序号6 开始, 展现另一种UI
        if (index >= 6) {
            return (
                <View
                    style={{
                        alignItems: 'center',
                        width: '50%',
                        paddingVertical: rpx(30),
                    }}>
                    <TouchableOpacity
                        style={{ alignItems: 'center' }}
                        onPress={() => this.props.navigation.push(item.target)}>
                        {/* item.icon :只有运行时才知道具体的值, webpack不能识别此状况 */}
                        {/* <Image source={require(item.icon)} /> */}
                        <Image source={item.icon} />
                        <Text style={{ fontSize: rpx(35) }}>{item.title}</Text>
                    </TouchableOpacity>
                </View>
            );
        }

        return (
            <View style={ss.item}>
                <Text style={{ fontSize: rpx(30) }}>{item.title}</Text>
                <Text
                    style={{ fontSize: rpx(40), fontWeight: 'bold', color: item.color }}>
                    {item.count}
                </Text>
                <Text style={{ fontSize: rpx(25) }}>{item.desc}</Text>
            </View>
        );
    };
}

const ss = StyleSheet.create({
    item: {
        width: '50%',
        alignItems: 'center',
        borderBottomWidth: rpx(1),
        borderRightWidth: rpx(1),
        paddingVertical: rpx(20),
    },
});
